<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <h3>{{counter}}</h3>
    <h3 v-text="counter"></h3>
    <button @click="add">点我加1</button>
    <button @click="destroy">点我销毁</button>
</div>


<script>
    const vm = new Vue({
        el:'#app',
        data:{
            msg:'Vue生命周期',
            counter:1
        },
        methods:{
            add(){
                console.log('add...')
                this.counter++
            },
            destroy() {
                // 销毁 vm
                this.$destroy()
            },
            m(){
                console.log("m...")
            }
        },
        watch:{
            counter(){
                console.log('counter 被监视一次')
            }
        },

        // 1.初始阶段
        // el 有，template 也有，最终编译 template 模板语句
        // el 有，template没有，最终编译 el 模板语句
        // el 没有的时候，需要手动调用 vm.$mount(el) 进行手动挂载，然后流程才能继续，此时如果 template有，最终编译 template模板语句
        // el 没有的时候，需要手动调用 vm.$mount(el) 进行手动挂载，然后流程才能继续，此时如果没有 template，最终编译 el模板语句
        // 结论:
            // 流程要想继续，el必须存在
            // el和 template 同时存在，优先选择template，如果没有 template ，才会选择 el
        /*
            创建前：
            创建前指的是：数据代理和数据监测的创建前
            此时还无法访问到data当中的数据，包括 methods也是无法访问的
        * */
        beforeCreate(){
            // 创建前
            console.log('beforeCreate',this.counter)
            // 调用 methods中的方法报错，不存在 "TypeError: this.m is not a function"
            // this.m()
        },
        created(){
            // 创建后
            // 创建后表示数据代理和数据监测创建完毕，可以访问 data中的数据了。
            console.log('created',this.counter)
            // 这里可以访问 methods当中定义的方法
            this.m()
            // debugger
        },

        // 2.挂载阶段
        beforeMount(){
            // 挂载前
            console.log('beforeMount')
            // debugger
        },
        mounted(){
            // 挂载后
            console.log('mounted')
            console.log(this.$el)
            console.log(this.$el instanceof HTMLElement)
            // debugger
        },

        // 3更新阶段
        beforeUpdate(){
            // 更新前
            console.log('beforeUpdate')
            // debugger
        },
        updated(){
            // 更新后
            console.log('updated')
        },

        // 4. 销毁阶段
        /*
         销毁式要：执行 vm.$destroy()方法才会被执行的
        * */
        beforeDestroy(){
            // 销毁前
            console.log('beforeDestroy')
            console.log(this)
            this.counter = 100
            // debugger
        },
        destroy(){
            // 销毁后
            console.log('destroy')
            console.log(this)
            debugger
        }
    })
</script>

</body>
</html>